<template>
    <!-- 做题的详情页面 -->
    <div class="content" ref="noScroll">
      <div class="layout">
<!--          TODO 这里的上一题需要判断,第一题的时候就不能点击      -->
        <!-- 上一题-->
<!--        <div class="up-last">-->
<!--            上一题-->
<!--        </div>-->
        <!--  题目   -->
        <a-spin :spinning="spinSwitch">
        <div v-for="(item, index) in contentAndAnswerList" :key="item.id">
          <div class="font-body" id="path1">
            <p :id="`select${index + 1}`">{{index + 1}}、{{item.title}}</p>
          </div>
          <!--  选择框  -->
          <div class="select">
            <a-radio-group :name="item.id" v-model:value="radioValue[index]" @change="radioChange">
              <a-radio  :style="radioStyle"
                        v-for="value in item.answerList"
                        :value="value.id"
              >
                <p class="p-color">{{value.answer}}</p>
              </a-radio>
            </a-radio-group>
          </div>
        </div>
      </a-spin>
        </div>
<!--
      &lt;!&ndash;   TODO 提交按钮需要判断是否做完所有题目,如果没有做完需要刚给出     &ndash;&gt;
      &lt;!&ndash;  提交按钮  &ndash;&gt;
      <div class="submit">
        <a-button type="primary">提交</a-button>
      </div>
-->

      <!-- 答题卡   -->
      <div class="topic-card">
        <!--  开关      -->
        <div class="topic-card-switch " @click="topicCardSwitch()" ref="switchRef">
          <div class="font">答题卡 </div>
          <svg v-show="controllerTopicCardBody === true" t="1715697961584" class="svg-sty" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12469"><path d="M185.884 327.55 146.3 367.133 512.021 732.779 877.7 367.133 838.117 327.55 511.997 653.676Z" p-id="12470"></path></svg>
          <svg v-show="controllerTopicCardBody === false" t="1715695765324" class="svg-sty" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11473" ><path d="M838.116 732.779 877.7 693.195 511.979 327.549 146.3 693.195 185.883 732.779 512.003 406.652Z" p-id="11474"></path></svg>
        </div>
        <!--  主体    -->
        <div class="topic-card-body" v-if="controllerTopicCardBody">
          <a class="numbers" v-for="item in contentAndAnswerList.length"
              :key="item"
              :href="`#select${item}`"
              :style="radioValue[item - 1] == null || radioValue[item - 1] == undefined
              ? {backgroundColor: 'rgb(66, 99, 128)'}
              : {backgroundColor: 'rgb(35,154,255)'}">
            <p class="number">{{item}}</p>
          </a>
        </div>
      </div>
    </div>
  <!--  提交按钮    -->
  <a class="submit" href="#" @click="submitMethod">提交</a>
  <!-- 分数 -->
  <transition name="gr">
    <div class="grade" v-show="gradeObj.gradeOpen">
      <a @click="gradeObj.gradeOpen = false">X</a>
      <div>
        分数:{{gradeObj.gradeNumber}}
      </div>
    </div>
  </transition>
    <fireworks v-if="gradeObj.gradeOpen"/>
</template>

<script setup lang="ts">
import {createVNode, reactive, ref} from "vue";
import {useRoute} from "vue-router";
import {queryConurseTopicContentAndAnswerList} from "@/api/conurseTopic.ts";
import {Modal} from "ant-design-vue";
import { ExclamationCircleOutlined, InfoCircleOutlined} from '@ant-design/icons-vue';
import Fireworks from "@/components/fireworks.vue";

const radioStyle = reactive({
  display: 'flex',
  height: '.8rem',
  lineHeight: '.8rem',
  marginTop: '0.1rem'
});
let spinSwitch = ref<Boolean>(false)

let controllerTopicCardBody = ref<Boolean>(false);

let topicCardSwitch = () => {
  controllerTopicCardBody.value = !controllerTopicCardBody.value;

}
let contentAndAnswerList = ref<Array<ConurseContentAnaAnswerType>>([])

let radioValue = ref<number[]>([])

const noScrollElement = ref();
// 控制分数弹框
let gradeObj = ref<GradeMessage>({
  gradeOpen: false,
  gradeNumber: 0
})
// 获取列表
const queryContentAnswerList = async () => {
  spinSwitch.value = true
  let {data: {data}} = await queryConurseTopicContentAndAnswerList(useRoute().params.id)
  contentAndAnswerList.value = data
  spinSwitch.value = false
}
// 初始
const initMethod = () => {
  queryContentAnswerList()
}
// 提交按钮
const submitMethod = () => {
  // 如果没答完就提示
  if (radioValue.value.length !== contentAndAnswerList.value.length) {
      Modal.confirm({
        title: '提示',
        icon: createVNode(ExclamationCircleOutlined),
        content: '题目还没有做完,确认提交吗???',
        onOk() {
          grade()
        },
        okText: '提交',
        cancelText: '取消',
        centered: true,
      })
  }else {
    Modal.confirm({
      title: '提示',
      icon: createVNode(InfoCircleOutlined),
      content: '题目已经全部做完,需要现在提交吗???',
      onOk() {
        grade()
      },
      okText: '提交',
      cancelText: '取消',
      centered: true,
    })
  }
}
// 计算分数
const grade = () => {
  // 计算每题分数
  let topGrae:number = 100 / contentAndAnswerList.value.length;
  let nums:number = 0
  // 取出所有下标,下标和对象的id对应)
  const indexes = Array.from(Array(radioValue.value.length).keys())
  contentAndAnswerList.value.forEach((item) => {
    if(indexes.includes(item.id - 1)) {
      // 是否是正确答案
      item.answerList.forEach((item2) => {
        if (item2.id === radioValue.value[item.id -1]) {
            if (item2.isAnswer === '1') {
              nums += topGrae
            }
        }
      })
    }
  })
  // 设置值
  gradeObj.value.gradeNumber = nums
  gradeObj.value.gradeOpen = true

}
// 选项发生变化时候的回调
const radioChange = () => {
  console.log('查看选项', radioValue.value)
}
initMethod()
</script>

<style scoped lang="less">
.content {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  box-sizing: border-box;
  position: relative;
  overflow: auto;
  background-color: var(--header-color);

  .layout {
    width: 18rem;
    margin: 0 auto;
    padding: 0.3rem 0.5rem;
    background-color: var(--hello-bk);
    border-radius: 0.2rem;
    box-sizing: border-box;
    box-shadow: 0 0.08rem 0.48rem rgba(32, 43, 54, .08);
  }

  .up-last {
    font-size: 0.30rem;
    color: #908f9e;
  }

  .up-last::before {
    content: '<';
    font-size: 0.36rem;
    line-height: .30rem;
    font-weight: bold;
  }

  .up-last:hover {
    cursor: pointer;
  }

  .font-body {
    display: flex;
    flex-direction: row;
    margin-top: 0.4rem;
    font-size: 0.26rem;
    font-weight: bold;
    letter-spacing: 0.02rem;
    color: var(--user-name-color);
  }

  .submit {
    position: relative;
    display: inline-block;
    left: 50%;
    margin-bottom: 0.3rem;
    transform: translateX(-50%);
  }

  .select {
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--tabs-border-color);

    .p-color {
      color: var(--topic-color);
    }
  }

  .topic-card {
    position: fixed;
    left: calc( ((100vw - 18rem) / 2) - 0.1rem);
    bottom: 0;
    width: 18rem;

    .topic-card-switch {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 1.6rem;
      height: 0.60rem;
      border-top: 1px solid var(--hello-border);
      border-right: 1px solid var(--hello-border);
      border-left: 1px solid var(--hello-border);
      border-radius: 0.24rem 0.24rem 0 0;
      box-sizing: border-box;
      transform: translateY(0.02rem);
      background-color: var(--header-color);
      transition: all .4s;

    }

      .font{
        color: var(--user-name-color);
        margin-right: .1rem;
        text-align: center;
        font-size: 0.24rem;
        font-weight: bold;
        line-height: 0.65rem;
      }

    .svg-sty {
      width: 0.28rem;
      height: 0.28rem;
      fill: var(--user-name-color);;
    }



    .topic-card-switch:hover {
      cursor: pointer;
    }

    .topic-card-body {
      display: flex;
      overflow: auto;
      flex-direction: row;
      flex-wrap: wrap;
      height: 220px;
      width: 18rem;
      background-color: var(--header-color);
      border-radius: 0 6px 6px 0;
      border-top: 1px solid var(--hello-border);
      border-right: 1px solid var(--hello-border);
      border-left: 1px solid var(--hello-border);

      .numbers {
        position: relative;
        margin: 0.3rem 0 0.3rem 0.4rem;
        height: .6rem;
        width: .6rem;
        border-radius: 50%;
        //background-color: rgb(66, 99, 128);
        //border: 1px solid #e3e3e3;

        .number {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: .2rem;
          color: var(--ware-chil4-color);
          text-decoration: none;
        }
      }


    }

//    答题卡想做动画效果,没做出来
/*
    @keyframes axisX {
      from {
        transform: translateY(0px);
      }
      to {
        transform: translateY(100%);
      }
    }

    .switch-animate {

    }

    .switch-animate.animate {
      animation: axisX .4s;
    }


    .fade-enter-active, .fade-leave-active {
      animation: axisX .8s;
    }

    .fade-leave-active {
      animation: axisX .4s ;
    }*/

  }

}

.submit {
  position: fixed;
  width: 1.4rem;
  height: 0.7rem;
  top: 50%;
  left: calc(((100vw - 18rem) / 2) + 17.9rem);
  background: linear-gradient(45deg, #52c4ee, #4ebbf8, #3980ef, #471fff);
  background-size: 300% 300%, auto;
  animation: gradient 7s ease infinite;
  font-size: 0.32rem;
  border-radius: 0 50% 50% 0 / 100% 100% 100% 100%;
  text-decoration: none;
  color: #f4f4f4;
  text-align: center;
  line-height: 0.7rem;

  @keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
}

.grade {
  position: absolute;
  height: 280px;
  width: 520px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 15px;
  background-color: #f6f6f6;
  z-index: 1000;
  border: 1px solid #ededed;
  filter: blur(.2px);

  a {
    display: block;
    height: 40px;
    border-bottom: 1px solid #e6e6e6;
    color: #c8c8c8;
    font-size: 21px;
    font-weight: bold;
    text-align: right;
    line-height: 40px;
    padding-right: 10px;
  }

  a:hover {
    cursor: pointer;
  }

}

@keyframes grade-y {
  0% {
    top: 0;
  }
}
@keyframes grade-y-finish {
  100% {
    top: 0;
  }
}

.gr-enter-active  {
  animation: grade-y .4s;
}

.gr-leave-active {
  animation: grade-y-finish .4s ;
}



</style>